<template>
  <tm-sheet
    class="lumosye-upload-file flex-center"
    :style="uploadFileStyle"
    margin="0"
    padding="0"
    borderColor="primary"
    borderWidth="4"
    borderStyle="dashed"
    @click="onClick"
  >
    <tm-icon color="primary" size="40" name="add-line" />
  </tm-sheet>
</template>

<script lang="ts" setup>
const emits = defineEmits(["choose"])
const props = defineProps({
  fileCount: {
    type: Number,
    default: 1,
  },
  fileType: {
    type: String,
    default: "image",
  },
})

const uploadFileStyle = reactive({
  width: `${uni.upx2px(140)}px`,
  height: `${uni.upx2px(140)}px`,
})

const onClick = () => {
  const { fileCount, fileType } = props
  uni.chooseFile({
    count: fileCount,
    type: fileType,
    success: (res) => {
      console.log(res)
      emits("choose", res)
    },
  })
}
</script>

<style lang="scss">
.lumosye-upload-file {
  background-color: #f7f8fa;
}
</style>
